86:I[903690,["/chat-static/_next/static/immutable/chunks/0t5koc6gywtjg.js","/chat-static/_next/static/immutable/chunks/2v089ui-jko4d.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3fk4u2d6m9dj-.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2d_66tvt_-qxg.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/3kqqw4c8munb9.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/0xg0t_a536i1t.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3tdrqbs7rcxs4.js","/chat-static/_next/static/immutable/chunks/2-h-ggegl4qz4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2niei3xz3mph4.js","/chat-static/_next/static/immutable/chunks/3j1smr879e_f6.js","/chat-static/_next/static/immutable/chunks/1j4n_6xagcur9.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3b6uum5y_1nfz.js"],"ExplicitChatIdProvider"] 87:I[838238,["/chat-static/_next/static/immutable/chunks/0t5koc6gywtjg.js","/chat-static/_next/static/immutable/chunks/2v089ui-jko4d.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3fk4u2d6m9dj-.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2d_66tvt_-qxg.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/3kqqw4c8munb9.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/0xg0t_a536i1t.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3tdrqbs7rcxs4.js","/chat-static/_next/static/immutable/chunks/2-h-ggegl4qz4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2niei3xz3mph4.js","/chat-static/_next/static/immutable/chunks/3j1smr879e_f6.js","/chat-static/_next/static/immutable/chunks/1j4n_6xagcur9.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3b6uum5y_1nfz.js"],"SWRDataProvider"] 88:T1589a,[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { DashboardOverview } from "@/components/dashboard-overview" import { PerformanceLeaderboard } from "@/components/performance-leaderboard" import { RecentActivities } from "@/components/recent-activities" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export default function Dashboard() { return (

Dashboard

Top Performers Our best performing sales representatives this month.

) } [V0_FILE]typescriptreact:file="app/sales-reps/[id]/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import * as z from "zod" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Textarea } from "@/components/ui/textarea" import { Switch } from "@/components/ui/switch" import { Slider } from "@/components/ui/slider" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { toast } from "@/components/ui/use-toast" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { CalendarIcon, Loader2 } from "lucide-react" import { format } from "date-fns" import { cn } from "@/lib/utils" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Checkbox } from "@/components/ui/checkbox" const formSchema = z.object({ personalInfo: z.object({ name: z.string().min(2, { message: "Name must be at least 2 characters.", }), email: z.string().email({ message: "Please enter a valid email address.", }), phone: z.string().regex(/^\+?[1-9]\d{1,14}$/, { message: "Please enter a valid phone number.", }), profileImage: z.string().url().optional(), }), salesMetrics: z.object({ targetRevenue: z.number().min(0), commissionRate: z.number().min(0).max(100), territory: z.string(), }), teamAssignment: z.object({ department: z.string(), manager: z.string(), startDate: z.date(), }), accountSettings: z.object({ isActive: z.boolean(), receiveNotifications: z.boolean(), }), skills: z.array(z.string()).min(1, { message: "Please select at least one skill.", }), notes: z.string().max(500, { message: "Notes must not exceed 500 characters.", }), assignedCompanies: z.array(z.string()), assignedCustomers: z.array(z.string()), }) const companies = [ { id: "company1", name: "Company 1" }, { id: "company2", name: "Company 2" }, { id: "company3", name: "Company 3" }, ] const customers = [ { id: "customer1", name: "Customer 1", companyId: "company1" }, { id: "customer2", name: "Customer 2", companyId: "company1" }, { id: "customer3", name: "Customer 3", companyId: "company2" }, ] export default function SalesRepForm({ params }: { params: { id: string } }) { const router = useRouter() const isNewRep = params.id === "new" const [isSubmitting, setIsSubmitting] = useState(false) const [salesRepData, setSalesRepData] = useState(null) const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { personalInfo: { name: "", email: "", phone: "", profileImage: "", }, salesMetrics: { targetRevenue: 0, commissionRate: 5, territory: "", }, teamAssignment: { department: "", manager: "", startDate: new Date(), }, accountSettings: { isActive: true, receiveNotifications: true, }, skills: [], notes: "", assignedCompanies: [], assignedCustomers: [], }, }) useEffect(() => { if (!isNewRep) { // Fetch sales rep data // This is a mock API call, replace with actual API call const fetchSalesRepData = async () => { // Simulating API delay await new Promise((resolve) => setTimeout(resolve, 1000)) const mockData = { personalInfo: { name: "John Doe", email: "john@example.com", phone: "+1234567890", profileImage: "https://example.com/john.jpg", }, salesMetrics: { targetRevenue: 100000, commissionRate: 10, territory: "North", }, teamAssignment: { department: "Enterprise", manager: "Jane Smith", startDate: new Date("2023-01-01"), }, accountSettings: { isActive: true, receiveNotifications: true, }, skills: ["Negotiation", "Product Knowledge"], notes: "Excellent performer, consistently exceeds targets.", assignedCompanies: ["company1", "company2"], assignedCustomers: ["customer1", "customer2"], } setSalesRepData(mockData) form.reset(mockData) } fetchSalesRepData() } }, [isNewRep, form]) function onSubmit(values: z.infer) { setIsSubmitting(true) // Simulate API call setTimeout(() => { console.log(values) setIsSubmitting(false) toast({ title: isNewRep ? "Sales Rep Added" : "Sales Rep Updated", description: isNewRep ? "The new sales representative has been successfully added." : "The sales representative has been successfully updated.", }) router.push("/sales-reps") }, 2000) } if (!isNewRep && !salesRepData) { return

} return (

{isNewRep ? "Add New Sales Representative" : "Edit Sales Representative"} Enter the details of the sales representative below.

Personal Info Sales Metrics Team Assignment Account Settings Assignments

( Full Name )} /> ( Email )} /> ( Phone Number )} /> ( Profile Image URL )} />

( Target Revenue field.onChange(Number.parseFloat(e.target.value))} /> )} /> ( Commission Rate (%) field.onChange(value[0])} /> Current rate: {field.value}% )} /> ( Sales Territory )} />

( Department )} /> ( Manager )} /> ( Start Date date > new Date() || date < new Date("1900-01-01")} initialFocus /> )} />

(

Active Account Deactivating the account will prevent the sales rep from logging in.

)} /> (

Receive Notifications Allow the sales rep to receive email and push notifications.

)} />

( Assigned Companies

{field.value.map((companyId) => { const company = companies.find((c) => c.id === companyId) return (

{company?.name}

) })}

)} /> ( Assigned Customers

{field.value.map((customerId) => { const customer = customers.find((c) => c.id === customerId) const company = companies.find((c) => c.id === customer?.companyId) return (

{customer?.name} ({company?.name})

) })}

)} />

) } [V0_FILE]typescriptreact:file="app/sales-reps/[id]/performance/page.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import Chart from "chart.js/auto" export default function SalesRepPerformance({ params }: { params: { id: string } }) { const chartRef = useRef(null) useEffect(() => { if (chartRef.current) { const ctx = chartRef.current.getContext("2d") if (ctx) { new Chart(ctx, { type: "line", data: { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [ { label: "Sales Performance", data: [65, 59, 80, 81, 56, 55], fill: false, borderColor: "rgb(75, 192, 192)", tension: 0.1, }, ], }, options: { responsive: true, scales: { y: { beginAtZero: true, }, }, }, }) } } }, []) return (

Sales Rep Performance

Monthly Sales Performance

Total Sales

$123,456

Conversion Rate

32%

) } [V0_FILE]typescriptreact:file="app/analytics/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip, LineChart, Line, PieChart, Pie, Cell, } from "recharts" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Input } from "@/components/ui/input" import { addDays, format } from "date-fns" const salesData = [ { month: "Jan", sales: 4000, target: 3500 }, { month: "Feb", sales: 3000, target: 3500 }, { month: "Mar", sales: 5000, target: 3500 }, { month: "Apr", sales: 4500, target: 3500 }, { month: "May", sales: 3500, target: 3500 }, { month: "Jun", sales: 4800, target: 3500 }, ] const performanceData = [ { name: "John Doe", performance: 92 }, { name: "Jane Smith", performance: 88 }, { name: "Bob Johnson", performance: 76 }, { name: "Alice Brown", performance: 95 }, { name: "Charlie Davis", performance: 82 }, ] const productData = [ { name: "Product A", value: 400 }, { name: "Product B", value: 300 }, { name: "Product C", value: 300 }, { name: "Product D", value: 200 }, ] const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"] export default function AnalyticsPage() { const [dateRange, setDateRange] = useState({ from: new Date(), to: addDays(new Date(), 20), }) return (

Analytics Dashboard

setDateRange({ ...dateRange, from: new Date(e.target.value) })} /> setDateRange({ ...dateRange, to: new Date(e.target.value) })} />

Sales Performance Rep Performance Product Analysis Monthly Sales vs Target Compare monthly sales against the target Sales Trend Monthly sales trend over time Sales Rep Performance Individual performance of sales representatives Product Sales Distribution Breakdown of sales by product {productData.map((entry, index) => ( ))}

) } [V0_FILE]typescriptreact:file="app/targets/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Progress } from "@/components/ui/progress" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" const initialTargets = [ { id: 1, name: "Q1 Target", current: 250000, target: 300000 }, { id: 2, name: "Q2 Target", current: 180000, target: 350000 }, { id: 3, name: "Q3 Target", current: 50000, target: 400000 }, { id: 4, name: "Q4 Target", current: 0, target: 450000 }, ] export default function TargetsPage() { const [targets, setTargets] = useState(initialTargets) const [newTarget, setNewTarget] = useState({ name: "", target: "" }) const [editingTarget, setEditingTarget] = useState(null) const handleNewTargetChange = (e: React.ChangeEvent) => { setNewTarget({ ...newTarget, [e.target.name]: e.target.value }) } const handleAddTarget = (e: React.FormEvent) => { e.preventDefault() const target = Number.parseInt(newTarget.target) if (newTarget.name && target) { setTargets([...targets, { id: targets.length + 1, name: newTarget.name, current: 0, target }]) setNewTarget({ name: "", target: "" }) } } const handleEditTarget = (target) => { setEditingTarget(target) } const handleUpdateTarget = () => { setTargets(targets.map((t) => (t.id === editingTarget.id ? editingTarget : t))) setEditingTarget(null) } const handleDeleteTarget = (id: number) => { setTargets(targets.filter((t) => t.id !== id)) } return (

Sales Targets

Current Targets Track your progress towards sales goals Target Name Current Target Progress Actions {targets.map((target) => ( {target.name} ${target.current.toLocaleString()} ${target.target.toLocaleString()} ))}

Add New Target Set a new sales target

) } [V0_FILE]typescriptreact:file="components/sales-rep-details-modal.tsx" isEdit="true" isMerged="true" import React from "react" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import Link from "next/link" interface SalesRep { id: number name: string email: string performance: number sales: number territory: string department: string isActive: boolean companiesAssigned: number customersAssigned: number startDate: string manager: string } interface SalesRepDetailsModalProps { isOpen: boolean onClose: () => void salesRep: SalesRep | null } export function SalesRepDetailsModal({ isOpen, onClose, salesRep }: SalesRepDetailsModalProps) { if (!salesRep) return null return ( ) } [V0_FILE]typescriptreact:file="app/profile/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import * as z from "zod" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Switch } from "@/components/ui/switch" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { toast } from "@/components/ui/use-toast" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Label } from "@/components/ui/label" const profileFormSchema = z.object({ username: z .string() .min(2, { message: "Username must be at least 2 characters.", }) .max(30, { message: "Username must not be longer than 30 characters.", }), email: z .string({ required_error: "Please select an email to display.", }) .email(), bio: z.string().max(160).min(4), urls: z .array( z.object({ value: z.string().url({ message: "Please enter a valid URL." }), }), ) .optional(), }) type ProfileFormValues = z.infer const defaultValues: Partial = { bio: "I'm a software developer...", urls: [{ value: "https://example.com" }, { value: "https://example2.com" }], } export default function ProfilePage() { const [avatar, setAvatar] = useState("/placeholder-avatar.jpg") const form = useForm({ resolver: zodResolver(profileFormSchema), defaultValues, mode: "onChange", }) function onSubmit(data: ProfileFormValues) { toast({ title: "You submitted the following values:", description: (

          {JSON.stringify(data, null, 2)}

), }) } return (

Profile

This is how others will see you on the site.

General Password Notifications General Information Update your photo and personal details here.

JPG, GIF or PNG. Max size of 800K

( Username This is your public display name. It can be your real name or a pseudonym. )} /> ( Email You can manage verified email addresses in your email settings. )} /> ( Bio

</FormControl>
                        <FormDescription>
                          You can <span>@mention</span> other users and organizations to link to them.
                        </FormDescription>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <Button type="submit">Update profile</Button>
                </form>
              </Form>
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="password" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Password</CardTitle>
              <CardDescription>Change your password here. After saving, you'll be logged out.</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="current">Current password</Label>
                <Input id="current" type="password" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="new">New password</Label>
                <Input id="new" type="password" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="confirm">Confirm password</Label>
                <Input id="confirm" type="password" />
              </div>
            </CardContent>
            <CardFooter>
              <Button>Save password</Button>
            </CardFooter>
          </Card>
        </TabsContent>
        <TabsContent value="notifications" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Notifications</CardTitle>
              <CardDescription>Configure how you receive notifications.</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center space-x-4">
                <Switch id="marketing" />
                <div className="space-y-1">
                  <Label htmlFor="marketing">Marketing emails</Label>
                  <p className="text-sm text-muted-foreground">
                    Receive emails about new products, features, and more.
                  </p>
                </div>
              </div>
              <div className="flex items-center space-x-4">
                <Switch id="social" />
                <div className="space-y-1">
                  <Label htmlFor="social">Social notifications</Label>
                  <p className="text-sm text-muted-foreground">
                    Receive notifications when someone mentions you or replies to your messages.
                  </p>
                </div>
              </div>
              <div className="flex items-center space-x-4">
                <Switch id="security" />
                <div className="space-y-1">
                  <Label htmlFor="security">Security emails</Label>
                  <p className="text-sm text-muted-foreground">
                    Receive emails about your account security and privacy.
                  </p>
                </div>
              </div>
            </CardContent>
            <CardFooter>
              <Button>Save notification settings</Button>
            </CardFooter>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/settings/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { toast } from "@/components/ui/use-toast"

export default function SettingsPage() {
  const [emailNotifications, setEmailNotifications] = useState(true)
  const [marketingEmails, setMarketingEmails] = useState(false)

const handleSaveGeneral = (event: React.FormEvent) => {
    event.preventDefault()
    // Implement save logic here
    toast({
      title: "Settings saved",
      description: "Your general settings have been updated.",
    })
  }

const handleSaveNotifications = () => {
    // Implement save logic here
    toast({
      title: "Notification settings saved",
      description: "Your notification preferences have been updated.",
    })
  }

return (
    <div className="container mx-auto py-10">
      <h1 className="text-3xl font-bold mb-6">Settings</h1>
      <Tabs defaultValue="general">
        <TabsList className="mb-4">
          <TabsTrigger value="general">General</TabsTrigger>
          <TabsTrigger value="notifications">Notifications</TabsTrigger>
        </TabsList>
        <TabsContent value="general">
          <Card>
            <CardHeader>
              <CardTitle>General Settings</CardTitle>
              <CardDescription>Manage your account settings and preferences.</CardDescription>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleSaveGeneral}>
                <div className="grid w-full items-center gap-4">
                  <div className="flex flex-col space-y-1.5">
                    <Label htmlFor="name">Name</Label>
                    <Input id="name" placeholder="Your name" />
                  </div>
                  <div className="flex flex-col space-y-1.5">
                    <Label htmlFor="email">Email</Label>
                    <Input id="email" placeholder="Your email" type="email" />
                  </div>
                </div>
              </form>
            </CardContent>
            <CardFooter>
              <Button type="submit">Save Changes</Button>
            </CardFooter>
          </Card>
        </TabsContent>
        <TabsContent value="notifications">
          <Card>
            <CardHeader>
              <CardTitle>Notification Preferences</CardTitle>
              <CardDescription>Manage how you receive notifications.</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center space-x-2">
                <Switch id="email-notifications" checked={emailNotifications} onCheckedChange={setEmailNotifications} />
                <Label htmlFor="email-notifications">Email Notifications</Label>
              </div>
              <div className="flex items-center space-x-2">
                <Switch id="marketing-emails" checked={marketingEmails} onCheckedChange={setMarketingEmails} />
                <Label htmlFor="marketing-emails">Marketing Emails</Label>
              </div>
            </CardContent>
            <CardFooter>
              <Button onClick={handleSaveNotifications}>Save Preferences</Button>
            </CardFooter>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/notifications.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Bell, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { ScrollArea } from "@/components/ui/scroll-area"
import { cn } from "@/lib/utils"

type Notification = {
  id: string
  title: string
  description: string
  date: string
  read: boolean
}

const initialNotifications: Notification[] = [
  {
    id: "1",
    title: "New Lead Assigned",
    description: "A new lead has been assigned to you. Check your dashboard for details.",
    date: "2 minutes ago",
    read: false,
  },
  {
    id: "2",
    title: "Meeting Reminder",
    description: "You have a team meeting scheduled in 30 minutes.",
    date: "10 minutes ago",
    read: false,
  },
  {
    id: "3",
    title: "Sales Target Update",
    description: "Your monthly sales target has been updated. View your new goals now.",
    date: "1 hour ago",
    read: true,
  },
  {
    id: "4",
    title: "New Product Training",
    description: "New product training materials are available. Complete the course by next week.",
    date: "1 day ago",
    read: true,
  },
]

export function Notifications() {
  const [isOpen, setIsOpen] = useState(false)
  const [notifications, setNotifications] = useState(initialNotifications)

const unreadCount = notifications.filter((n) => !n.read).length

const markAsRead = (id: string) => {
    setNotifications(notifications.map((n) => (n.id === id ? { ...n, read: true } : n)))
  }

const markAllAsRead = () => {
    setNotifications(notifications.map((n) => ({ ...n, read: true })))
  }

return (
    <div className="relative">
      <Button
        variant="ghost"
        size="icon"
        className="relative"
        onClick={() => setIsOpen(!isOpen)}
        aria-label={`${unreadCount} unread notifications`}
      >
        <Bell className="h-5 w-5" />
        {unreadCount > 0 && (
          <span className="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">
            {unreadCount}
          </span>
        )}
      </Button>
      {isOpen && (
        <Card className="absolute right-0 mt-2 w-80 sm:w-96 z-50 shadow-lg">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Notifications</CardTitle>
            <Button variant="ghost" className="h-4 w-4 p-0" onClick={() => setIsOpen(false)}>
              <X className="h-4 w-4" />
              <span className="sr-only">Close</span>
            </Button>
          </CardHeader>
          <CardContent className="pt-1">
            <ScrollArea className="h-[300px] overflow-y-auto">
              {notifications.map((notification) => (
                <div
                  key={notification.id}
                  className={cn(
                    "mb-4 p-3 rounded-lg transition-colors",
                    notification.read ? "bg-gray-100" : "bg-blue-50 hover:bg-blue-100",
                  )}
                  onClick={() => markAsRead(notification.id)}
                >
                  <h3 className="text-sm font-medium">{notification.title}</h3>
                  <p className="text-xs text-gray-500 mt-1">{notification.description}</p>
                  <p className="text-xs text-gray-400 mt-1">{notification.date}</p>
                </div>
              ))}
            </ScrollArea>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button variant="ghost" size="sm" onClick={markAllAsRead}>
              Mark all as read
            </Button>
            <Button variant="ghost" size="sm">
              View all
            </Button>
          </CardFooter>
        </Card>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import "./globals.css"
import { Inter } from "next/font/google"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Search, ChevronDown, User, Settings, LogOut } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Notifications } from "@/components/notifications"
import { cn } from "@/lib/utils"
import type React from "react" // Added import for React

const inter = Inter({ subsets: ["latin"] })

export const metadata = {
  title: "SalesForge | Advanced Sales Rep Management",
  description: "Premium platform for managing and optimizing your sales team performance",
}

function NavLink({ href, children }) {
  const pathname = usePathname()
  const isActive = pathname === href

return (
    <Link
      href={href}
      className={cn(
        "inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium",
        isActive
          ? "border-blue-500 text-gray-900"
          : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
      )}
    >
      {children}
    </Link>
  )
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className="h-full bg-gray-100">
      <body className={`${inter.className} h-full`}>
        <div className="min-h-full">
          <nav className="bg-white border-b border-gray-200">
            <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
              <div className="flex h-16 justify-between">
                <div className="flex">
                  <div className="flex flex-shrink-0 items-center">
                    <Link href="/" className="text-2xl font-bold text-blue-600">
                      SalesForge
                    </Link>
                  </div>
                  <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
                    <NavLink href="/">Dashboard</NavLink>
                    <NavLink href="/sales-reps">Sales Reps</NavLink>
                    <NavLink href="/analytics">Analytics</NavLink>
                    <NavLink href="/targets">Targets</NavLink>
                  </div>
                </div>
                <div className="hidden sm:ml-6 sm:flex sm:items-center">
                  <div className="w-full max-w-lg lg:max-w-xs">
                    <label htmlFor="search" className="sr-only">
                      Search
                    </label>
                    <div className="relative">
                      <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                        <Search className="h-5 w-5 text-gray-400" aria-hidden="true" />
                      </div>
                      <Input
                        id="search"
                        name="search"
                        className="block w-full rounded-md border-0 bg-white py-1.5 pl-10 pr-3 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
                        placeholder="Search"
                        type="search"
                      />
                    </div>
                  </div>
                  <Notifications />

{/* Profile dropdown */}
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" className="ml-3 flex items-center">
                        <span className="sr-only">Open user menu</span>
                        <Avatar>
                          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                          <AvatarFallback>CN</AvatarFallback>
                        </Avatar>
                        <span className="ml-2 hidden text-sm font-medium text-gray-700 lg:block">John Doe</span>
                        <ChevronDown className="ml-1 h-5 w-5 text-gray-400" aria-hidden="true" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuLabel>My Account</DropdownMenuLabel>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem>
                        <User className="mr-2 h-4 w-4" />
                        <Link href="/profile">Profile</Link>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Settings className="mr-2 h-4 w-4" />
                        <Link href="/settings">Settings</Link>
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <LogOut className="mr-2 h-4 w-4" />
                        <span>Log out</span>
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </div>
              </div>
            </div>
          </nav>

<div className="py-10">
            <main>
              <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">{children}</div>
            </main>
          </div>
        </div>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="components/dashboard-overview.tsx" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowUpRight, ArrowDownRight, DollarSign, Users, Target, TrendingUp } from "lucide-react"

export function DashboardOverview() {
  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
          <DollarSign className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">$45,231.89</div>
          <p className="text-xs text-muted-foreground">+20.1% from last month</p>
        </CardContent>
      </Card>
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Active Sales Reps</CardTitle>
          <Users className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">+2350</div>
          <p className="text-xs text-muted-foreground">+180.1% from last month</p>
        </CardContent>
      </Card>
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Sales Target</CardTitle>
          <Target className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">78%</div>
          <p className="text-xs text-muted-foreground">+5% to target</p>
        </CardContent>
      </Card>
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Average Performance</CardTitle>
          <TrendingUp className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">+573</div>
          <p className="text-xs text-muted-foreground">+201 since last hour</p>
        </CardContent>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/performance-leaderboard.tsx" isMerged="true"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

const topPerformers = [
  { name: "John Doe", sales: 150000, performance: 92 },
  { name: "Jane Smith", sales: 135000, performance: 88 },
  { name: "Bob Johnson", sales: 120000, performance: 85 },
  { name: "Alice Brown", sales: 110000, performance: 82 },
  { name: "Charlie Davis", sales: 105000, performance: 80 },
]

export function PerformanceLeaderboard() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead className="w-[100px]">Rank</TableHead>
          <TableHead>Name</TableHead>
          <TableHead>Sales</TableHead>
          <TableHead className="text-right">Performance</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {topPerformers.map((performer, index) => (
          <TableRow key={performer.name}>
            <TableCell className="font-medium">{index + 1}</TableCell>
            <TableCell>
              <div className="flex items-center">
                <Avatar className="h-8 w-8 mr-2">
                  <AvatarImage src={`https://avatar.vercel.sh/${performer.name.replace(" ", "-")}.png`} />
                  <AvatarFallback>
                    {performer.name
                      .split(" ")
                      .map((n) => n[0])
                      .join("")}
                  </AvatarFallback>
                </Avatar>
                {performer.name}
              </div>
            </TableCell>
            <TableCell>${performer.sales.toLocaleString()}</TableCell>
            <TableCell className="text-right">{performer.performance}%</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

[V0_FILE]typescriptreact:file="components/recent-activities.tsx" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

const recentActivities = [
  { user: "John Doe", action: "closed a deal with", target: "Acme Inc", value: "$50,000", time: "2 hours ago" },
  { user: "Jane Smith", action: "added a new lead", target: "TechCorp", value: "", time: "4 hours ago" },
  { user: "Bob Johnson", action: "updated sales forecast for", target: "Q3", value: "+$100,000", time: "Yesterday" },
  {
    user: "Alice Brown",
    action: "scheduled a meeting with",
    target: "Globex Corporation",
    value: "",
    time: "Yesterday",
  },
  { user: "Charlie Davis", action: "achieved monthly target of", target: "", value: "$200,000", time: "2 days ago" },
]

export function RecentActivities() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Recent Activities</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-8">
          {recentActivities.map((activity, index) => (
            <div key={index} className="flex items-center">
              <Avatar className="h-9 w-9">
                <AvatarImage
                  src={`https://avatar.vercel.sh/${activity.user.replace(" ", "-")}.png`}
                  alt={activity.user}
                />
                <AvatarFallback>
                  {activity.user
                    .split(" ")
                    .map((n) => n[0])
                    .join("")}
                </AvatarFallback>
              </Avatar>
              <div className="ml-4 space-y-1">
                <p className="text-sm font-medium leading-none">
                  <span className="font-semibold">{activity.user}</span> {activity.action} {activity.target}
                  {activity.value && <span className="font-semibold"> {activity.value}</span>}
                </p>
                <p className="text-sm text-muted-foreground">{activity.time}</p>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="components/animated-toast.tsx"
"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Check, Loader2 } from "lucide-react"

interface AnimatedToastProps {
  message: string
  duration?: number
  onClose?: () => void
}

export function AnimatedToast({ message, duration = 3000, onClose }: AnimatedToastProps) {
  const [isVisible, setIsVisible] = useState(true)
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 1500)

const closeTimer = setTimeout(() => {
      setIsVisible(false)
      onClose && onClose()
    }, duration)

return () => {
      clearTimeout(timer)
      clearTimeout(closeTimer)
    }
  }, [duration, onClose])

return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0, y: 50, scale: 0.3 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, scale: 0.5, transition: { duration: 0.2 } }}
          className="fixed bottom-4 right-4 bg-white border border-gray-200 rounded-lg shadow-lg p-4 flex items-center space-x-3"
        >
          <motion.div
            initial={{ scale: 1 }}
            animate={isLoading ? { rotate: 360 } : { scale: 1.2 }}
            transition={
              isLoading ? { repeat: Number.POSITIVE_INFINITY, duration: 1 } : { type: "spring", stiffness: 200 }
            }
          >
            {isLoading ? <Loader2 className="h-6 w-6 text-blue-500" /> : <Check className="h-6 w-6 text-green-500" />}
          </motion.div>
          <span className="text-gray-800">{message}</span>
        </motion.div>
      )}
    </AnimatePresence>
  )
}

[V0_FILE]typescriptreact:file="components/interactive-performance-chip.tsx"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"

interface InteractivePerformanceChipProps {
  performance: number
}

export function InteractivePerformanceChip({ performance }: InteractivePerformanceChipProps) {
  const [isHovered, setIsHovered] = useState(false)

const getColor = (performance: number) => {
    if (performance >= 90) return "bg-green-100 text-green-700"
    if (performance >= 75) return "bg-yellow-100 text-yellow-700"
    return "bg-red-100 text-red-700"
  }

return (
    <motion.div
      className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${getColor(performance)}`}
      onHoverStart={() => setIsHovered(true)}
      onHoverEnd={() => setIsHovered(false)}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.95 }}
    >
      <motion.span
        initial={{ width: "0%" }}
        animate={{ width: isHovered ? "100%" : "0%" }}
        transition={{ duration: 0.5 }}
        className="absolute left-0 top-0 h-full bg-current opacity-20 rounded-full"
      />
      {performance}%
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="app/sales-reps/page.tsx" isEdit="true"
"use client"

import { useState, useMemo } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { ArrowUpRight, MoreHorizontal, Trash, UserX, ArrowUpDown } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { SalesRepDetailsModal } from "@/components/sales-rep-details-modal"
import { InteractivePerformanceChip } from "@/components/interactive-performance-chip"
import { AnimatedToast } from "@/components/animated-toast"
import { PerformanceTrend } from "@/components/performance-trend"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { toast } from "@/components/ui/use-toast"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

// This would typically come from a database
const initialSalesReps = [
  {
    id: 1,
    name: "John Doe",
    email: "john@example.com",
    performance: 92,
    sales: 150000,
    territory: "North",
    department: "Enterprise",
    status: "active",
    companiesAssigned: 3,
    customersAssigned: 12,
    performanceTrend: "up",
  },
  {
    id: 2,
    name: "Jane Smith",
    email: "jane@example.com",
    performance: 88,
    sales: 135000,
    territory: "South",
    department: "SME",
    status: "active",
    companiesAssigned: 5,
    customersAssigned: 20,
    performanceTrend: "down",
  },
  {
    id: 3,
    name: "Bob Johnson",
    email: "bob@example.com",
    performance: 76,
    sales: 98000,
    territory: "West",
    department: "Government",
    status: "inactive",
    companiesAssigned: 2,
    customersAssigned: 8,
    performanceTrend: "stable",
  },
]

export default function SalesRepList() {
  const [salesReps, setSalesReps] = useState(initialSalesReps)
  const [selectedRep, setSelectedRep] = useState(null)
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
  const [isResignDialogOpen, setIsResignDialogOpen] = useState(false)
  const [repToDelete, setRepToDelete] = useState(null)
  const [repToResign, setRepToResign] = useState(null)
  const [showToast, setShowToast] = useState(false)
  const [sortConfig, setSortConfig] = useState({ key: null, direction: "ascending" })
  const [statusFilter, setStatusFilter] = useState("all")
  const router = useRouter()

const sortedAndFilteredSalesReps = useMemo(() => {
    let filteredReps = salesReps
    if (statusFilter !== "all") {
      filteredReps = salesReps.filter((rep) => rep.status === statusFilter)
    }

if (sortConfig.key) {
      filteredReps.sort((a, b) => {
        if (a[sortConfig.key] < b[sortConfig.key]) {
          return sortConfig.direction === "ascending" ? -1 : 1
        }
        if (a[sortConfig.key] > b[sortConfig.key]) {
          return sortConfig.direction === "ascending" ? 1 : -1
        }
        return 0
      })
    }
    return filteredReps
  }, [salesReps, sortConfig, statusFilter])

const requestSort = (key) => {
    let direction = "ascending"
    if (sortConfig.key === key && sortConfig.direction === "ascending") {
      direction = "descending"
    }
    setSortConfig({ key, direction })
  }

const openModal = (rep) => {
    setSelectedRep(rep)
    setIsModalOpen(true)
  }

const closeModal = () => {
    setSelectedRep(null)
    setIsModalOpen(false)
  }

const handleDelete = (rep) => {
    setRepToDelete(rep)
    setIsDeleteDialogOpen(true)
  }

const confirmDelete = () => {
    setSalesReps(salesReps.filter((rep) => rep.id !== repToDelete.id))
    setIsDeleteDialogOpen(false)
    setShowToast(true)
  }

const handleResign = (rep) => {
    setRepToResign(rep)
    setIsResignDialogOpen(true)
  }

const confirmResign = () => {
    setSalesReps(salesReps.map((rep) => (rep.id === repToResign.id ? { ...rep, status: "resigned" } : rep)))
    setIsResignDialogOpen(false)
    setShowToast(true)
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-3xl font-bold tracking-tight text-gray-900">Sales Representatives</h1>
        <Link
          href="/sales-reps/new"
          className="inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
        >
          Add New Rep
        </Link>
      </div>
      <div className="flex justify-end space-x-4">
        <Select value={statusFilter} onValueChange={setStatusFilter}>
          <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="Filter by status" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Statuses</SelectItem>
            <SelectItem value="active">Active</SelectItem>
            <SelectItem value="inactive">Inactive</SelectItem>
            <SelectItem value="resigned">Resigned</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div className="bg-white shadow-md rounded-lg overflow-hidden">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Rep</TableHead>
              <TableHead>
                <Button variant="ghost" onClick={() => requestSort("performance")}>
                  Performance
                  <ArrowUpDown className="ml-2 h-4 w-4" />
                </Button>
              </TableHead>
              <TableHead>
                <Button variant="ghost" onClick={() => requestSort("sales")}>
                  Total Sales
                  <ArrowUpDown className="ml-2 h-4 w-4" />
                </Button>
              </TableHead>
              <TableHead>Territory</TableHead>
              <TableHead>Department</TableHead>
              <TableHead>Companies</TableHead>
              <TableHead>Customers</TableHead>
              <TableHead>
                <Button variant="ghost" onClick={() => requestSort("status")}>
                  Status
                  <ArrowUpDown className="ml-2 h-4 w-4" />
                </Button>
              </TableHead>
              <TableHead>Trend</TableHead>
              <TableHead className="text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {sortedAndFilteredSalesReps.map((rep) => (
              <TableRow key={rep.id}>
                <TableCell className="font-medium">
                  <div className="flex items-center space-x-3">
                    <Avatar>
                      <AvatarImage src={`https://avatar.vercel.sh/${rep.name.replace(" ", "-")}.png`} />
                      <AvatarFallback>
                        {rep.name
                          .split(" ")
                          .map((n) => n[0])
                          .join("")}
                      </AvatarFallback>
                    </Avatar>
                    <div>
                      <div className="font-medium">{rep.name}</div>
                      <div className="text-sm text-muted-foreground">{rep.email}</div>
                    </div>
                  </div>
                </TableCell>
                <TableCell>
                  <InteractivePerformanceChip performance={rep.performance} />
                </TableCell>
                <TableCell>${rep.sales.toLocaleString()}</TableCell>
                <TableCell>{rep.territory}</TableCell>
                <TableCell>{rep.department}</TableCell>
                <TableCell>{rep.companiesAssigned}</TableCell>
                <TableCell>{rep.customersAssigned}</TableCell>
                <TableCell>
                  <Badge
                    variant={
                      rep.status === "active" ? "success" : rep.status === "inactive" ? "secondary" : "destructive"
                    }
                  >
                    {rep.status.charAt(0).toUpperCase() + rep.status.slice(1)}
                  </Badge>
                </TableCell>
                <TableCell>
                  <PerformanceTrend trend={rep.performanceTrend} />
                </TableCell>
                <TableCell className="text-right">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" className="h-8 w-8 p-0">
                        <span className="sr-only">Open menu</span>
                        <MoreHorizontal className="h-4 w-4" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuLabel>Actions</DropdownMenuLabel>
                      <DropdownMenuItem onClick={() => openModal(rep)}>View details</DropdownMenuItem>
                      <DropdownMenuItem onClick={() => router.push(`/sales-reps/${rep.id}`)}>Edit</DropdownMenuItem>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem onClick={() => handleResign(rep)}>
                        <UserX className="mr-2 h-4 w-4" />
                        <span>Mark as resigned</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem onClick={() => handleDelete(rep)}>
                        <Trash className="mr-2 h-4 w-4" />
                        <span>Delete</span>
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
      <SalesRepDetailsModal isOpen={isModalOpen} onClose={closeModal} salesRep={selectedRep} />
      <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you sure you want to delete this sales rep?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete the sales representative's account and remove
              their data from our servers.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={confirmDelete}>Delete</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
      <AlertDialog open={isResignDialogOpen} onOpenChange={setIsResignDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Mark sales rep as resigned?</AlertDialogTitle>
            <AlertDialogDescription>
              This will change the status of the sales representative to "resigned". They will no longer be considered
              an active member of the sales team.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={confirmResign}>Confirm</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
      {showToast && <AnimatedToast message="Action completed successfully" onClose={() => setShowToast(false)} />}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/performance-trend.tsx"
import { TrendingUp, TrendingDown, Minus } from "lucide-react"

interface PerformanceTrendProps {
  trend: "up" | "down" | "stable"
}

export function PerformanceTrend({ trend }: PerformanceTrendProps) {
  switch (trend) {
    case "up":
      return <TrendingUp className="text-green-500" />
    case "down":
      return <TrendingDown className="text-red-500" />
    case "stable":
      return <Minus className="text-yellow-500" />
    default:
      return null
  }
}
7c:["$","$L86",null,{"chatId":"Wknwg4nuKva","children":["$","$L87",null,{"data":{"@\"active-block\",\"Wknwg4nuKva\",":{"id":"b_c8LLTBjTQUD","messageId":"gwG6GBV1FcbwCcX2c62kRUXpIKalizl0","source":"$88","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"sales-rep-management","type":"code-project","project":"sales-rep-management"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"Wknwg4nuKva\",":false,"":null},"children":"$L89"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This